<template>
	<view class="header-top">
		<view class="rule-btn flex-center" @click="$u.throttle(route('/pages/users/partner/record_application/index'), 500)">
			申请记录
		</view>
	</view>
	<view class="bg-v-gradient">
		<view class="content-box">
			<view class="title">
				请填写以下信息
			</view>
			<view class="flex-between cell">
				<view class="label">
					加油站名称
				</view>
				<view>
					<u-input v-model="data.gasStationName" border="none" maxlength="10" input-align="right"
						placeholder="请输入加油站名称"></u-input>
				</view>
			</view>
			<view class="flex-between cell">
				<view class="label">
					加油站地址
				</view>
				<view>
					<u-input v-model="data.gasStationAddress" border="none" input-align="right"
						placeholder="请输入加油站地址"></u-input>
				</view>
			</view>
			<view class="flex-between cell">
				<view class="label">
					联系人
				</view>
				<view>
					<u-input v-model="data.linkman" border="none" input-align="right" maxlength="5" placeholder="请输入用户姓名"></u-input>
				</view>
			</view>
			<view class="flex-between cell">
				<view class="label">
					联系电话
				</view>
				<view>
					<u-input v-model="data.phone" border="none" input-align="right" maxlength="11" placeholder="请输入联系电话"></u-input>
				</view>
			</view>
			<view class="flex-between cell">
				<view class="label">
					验证码
				</view>
				<view class="flex flex-between">
					<u-input v-model="authCode" border="none" maxlength="6" input-align="right" placeholder="请输入验证码"></u-input>
					<view class="code-btn" @click="$u.throttle(getCode, 500)">
						获取验证码
					</view>
				</view>
			</view>

			<view class="zizhi">
				<view class="title">
					请上传营业执照及相关资质证明图片
				</view>
				<view class="tips">(图片最多可上传8张，图片格式支持JPJ、PNG、JPEG） </view>
				<view class="mt">
					<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="8"></u-upload>

				</view>
			</view>

			<view class="mt10">
				<u-button type="primary" shape="circle" @click="$u.throttle(submit, 500)">提交申请</u-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		route
	} from '@/uni_modules/uview-plus';
	import {
		reactive,
		ref
	} from "vue";
	import API from "@/api/index.js"
	import {
		toast,
		test
	} from "@/uni_modules/uview-plus";
	import {
		HTTP_REQUEST_URL,HTTP_PIC_URL
	} from "@/config/app.js"

	const fileList = reactive([])
	const data = reactive({
		gasStationName:'',
		gasStationAddress:'',
		linkman:'',
		phone:''
	})
	const authCode = ref('')
	// 选择图片
	const afterRead = async (event) => {
		console.log("afterRead 选择图片", event);
		// fileList[event.index] = [{
		// 	...event.file[0],
		// 	status: 'uploading',
		// 	message: '上传中'
		// }]
		// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = [`fileList${event.name}`].length;
		// lists.map((item) => {
		// 	[`fileList${event.name}`].push({
		// 		...item,
		// 		status: "uploading",
		// 		message: "上传中",
		// 	});
		// });
		for (let i = 0; i < lists.length; i++) {
			uni.uploadFile({
				url: HTTP_REQUEST_URL + '/api/FilesUpload/UploadFile' + '/1/' + uni.getStorageSync(
					'userInfo').id,
				filePath: lists[i].url,
				name: "file",
				formData: {
					file:lists[i]
				},
				success: (res) => {
					const fileData = JSON.parse(res.data);
					fileList.push({url:HTTP_REQUEST_URL+fileData.data})
					// fileList.push({url:HTTP_PIC_URL+fileData.data})
					console.log("res", fileData,fileList);
				}
			});
			// let item = [`fileList${event.name}`][fileListLen];
			// [`fileList${event.name}`].splice(
			// 	fileListLen,
			// 	1,
			// 	Object.assign(item, {
			// 		status: "success",
			// 		message: "",
			// 		url: result,
			// 	})
			// );
			// fileListLen++;
		}

	}
	const deletePic = (event) => {
		console.log("deletePic", event);
		fileList.splice(event.index, 1)
		// delete uploadList[type]
	}
	// 获取验证码
	const getCode =()=>{
		
	}
	/* 提交 */
	const submit = async () => {
		console.log("submit",data,authCode.value,fileList);
		const rules = [{
				key: 'gasStationName',
				text: '请输入加油站名称'
			},
			{
				key: 'gasStationAddress',
				text: '请输入加油站地址',
			},
			{
				key: 'linkman',
				text: '请填写联系人'
			},
			{
				key: 'phone',
				text: '请正确填写联系电话',
				test: 'mobile'
			}
		]
		for (let item of rules) {
			if (data[item.key] == '') return toast(item.text)
			if (item.test && !test[item.test](data[item.key])) return toast(item.text)
		}
		if(authCode.value==''||fileList.length==0){
			return toast("请先将信息填写完整！")
		}
		let id = await API.uuid()
		let user = uni.getStorageSync('userInfo')
	}
</script>

<style lang="scss">
	.header-top {
		background-image: url('../static/images/partner_img.jpg');
		width: 100%;
		height: 400rpx;
		background-size: cover;

		.rule-btn {
			top: 100px;
			height: 54rpx;
			background: rgba(0, 0, 0, .15);
			border-radius: 13px 0 0 13px;
			position: absolute;
			right: 0;
			width: 71px;
			font-size: 24rpx;
			color: #fff;
		}
	}

	.bg-v-gradient {
		background: linear-gradient(180deg, #fe7015, #eb3b26);
		min-height: calc(100vh - 400rpx);
		padding-bottom: 13px;
		position: relative;
		display: flex;
		justify-content: center;

		.content-box {
			position: absolute;
			top: -100rpx;
			padding: 36rpx 44rpx;
			border-radius: 13px;
			background-color: #fff;

			.title {
				font-weight: 500;
				font-size: 16px;
			}

			.cell {
				margin-top: 60rpx;

				.label {
					line-height: 22px;
					font-size: 16px;
				}

				.code-btn {
					margin-left: 20rpx;
					border: 1px solid #e93323;
					color: #e93323;
					border-radius: 16px;
					font-size: 24rpx;
					padding: 10rpx;
				}
			}

			.zizhi {
				margin-top: 64rpx;

				.title {
					line-height: 40rpx;
				}

				.tips {
					color: #ccc;
					margin-top: 12rpx;
					line-height: 34rpx;
					font-size: 12px;
				}
			}
		}
	}
</style>